<template>
  <v-col>
    <v-card
      class="ma-3"
      v-for="item in articleList"
      :key="item.ID"
      link
      @click="$router.push({ name: 'detail', params: { id: item.ID } })"
    >
      <v-row no-gutters>
        <v-col class="d-flex justify-center align-center mx-3" cols="2">
          <v-img max-height="100" max-width="100" :src="item.img"></v-img>
        </v-col>
        <v-col>
          <v-card-title class="my-2"
            ><v-chip color="pink" label class="white--text mr-3">{{
              item.category.name
            }}</v-chip
            >{{ item.title }}</v-card-title
          >
          <v-card-subtitle v-text="item.desc"></v-card-subtitle>
          <v-divider></v-divider>
          <v-card-text class="d-flex align-center">
            <v-icon class="mr-1" small>mdi-calendar</v-icon>
            <span>{{
              item.CreatedAt | dateformat("YYYY-MM-DD HH:mm:SS")
            }}</span>
          </v-card-text>
        </v-col>
      </v-row>
    </v-card>
    <div class="text-center">
      <v-pagination
        total-visible="5"
        v-model="queryParam.pageNum"
        :length="Math.ceil(total / queryParam.pageSize)"
        @input="getArticleList"
      ></v-pagination>
    </div>
  </v-col>
</template>

<script>
export default {
  data() {
    return {
      articleList: [],
      queryParam: {
        pageNum: 1,
        pageSize: 5,
      },
      total: 0,
    };
  },
  created() {
    this.getArticleList();
  },
  methods: {
    // 获取文章列表
    async getArticleList() {
      const { data: res } = await this.$http.get("/articles", {
        params: {
          pageNum: this.queryParam.pageNum,
          pageSize: this.queryParam.pageSize,
        },
      });
      if (res.status != 200) return this.$message.error("获取文章列表失败");
      this.articleList = res.data;
      this.total = res.total;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>